body {
	padding: 0;
	margin: 0;
}

.app {
	width: 95%;
	margin: 0 auto;
	transition: all 0.1s;
}

.img-box-w {
	box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
	background: #fff;
	overflow: hidden;
	position: relative;
	margin: 12px 0;
}

.img-box {
	position: relative;
}

.img {
	width: 100%;
	height: 100%;
}

.title {
	padding: 0 8px;
}

.right {
	float: right;
}

.top {
	overflow: hidden;
	position: absolute;
	transform: translateY(-110px);
	-webkit-transform: translateY(-110px);
	width: 100%;
	z-index: 8;
	background-color: #fff;
	top: 0;
	transition: transform 0.1s;
}

.cssload-thecube {
	width: 40px;
	height: 40px;
	margin: 20px auto;
	position: relative;
	transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
}

.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
}

.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(240,96,137,0.98);
	animation: cssload-fold-thecube 2.76s infinite linear both;
	-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
	transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;
}

.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
	-webkit-transform: scale(1.1) rotateZ(90deg);
}

.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
	-webkit-transform: scale(1.1) rotateZ(180deg);
}

.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
	-webkit-transform: scale(1.1) rotateZ(270deg);
}

.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;
	-webkit-animation-delay: 0.35s;
}

.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;
	-webkit-animation-delay: 0.69s;
}

.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;
	-webkit-animation-delay: 1.04s;
}

@keyframes bounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}

	20% {
		transform: scale3d(1, 1, 1);
	}

	40% {
		transform: scale3d(.93, .93, .93);
	}

	60% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}

	80% {
		transform: scale3d(.97, .97, .97);
	}

	to {
		opacity: 0.1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}

	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}

	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}

	25%,
				75% {
		-webkit-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}

	90%,
				100% {
		-webkit-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

.zhe {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 190px;
	text-align: center;
	background-color: rgba(0,0,0,0.68);
	color: #FDFDFD;
	animation: bounceIn 2s;
}

.zhe-m {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

.zhe img {
	vertical-align: middle;
	height: 40px;
	width: 40px;
	margin-right: 10px;
	position: relative;
	top: -2px;
}

img.islove {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 14px;
	height: 14px;
}





.right-menu {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 60px;
	left: 0;
	z-index: 100;
	background-color: #FFF;
	overflow-y: scroll;
	overflow-x: hidden;
}


.fade-r-enter-active, .fade-r-leave-active {
  transition: transform .5s;
  -webkit-transition: transform .5s;
}
.fade-r-enter, .fade-r-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.full {
	position: fixed;
	background-color: #fd5e5e;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	padding-top: 30%;
	z-index: 999;
}

.full-sms {
	color: #fff;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fd5e5e;
	z-index: 200;
	box-shadow: 0 2px 5px rgba(0,0,0,.26);
}

.content {
	position: relative;
	margin-top: 70px;
}

.nav-title {
	color: #fff;
	font-size: 20px;
	line-height: 60px;
}

.setico {
	position: absolute;
	right: 0;
	top: 21px;
	height: 21px;
	width: 21px;
	padding-right: 20px;
}

.backico {
	vertical-align: middle;
	padding: 10px;
	position: relative;
	top: -2px;
}

.nav-title>.title {
	padding-left: 10px;
}

.nav-list {
	position: fixed;
	top: 60px;
	right: 0;
	z-index: 999;
	list-style: none;
	margin: 0px;
	background-color: #fefefe;
	box-shadow: 0 2px 5px rgba(0,0,0,.26);
	padding: 8px 20px;
	min-width: 90px;
}

.nav-list>li {
	list-style: none;
	font-size: 20px;
	line-height: 40px;
}

.slide-fade-enter-active {
	transition: all .3s ease;
}

.slide-fade-leave-active {
	transition: all .3s ease;
}

.slide-fade-enter, .slide-fade-leave-to
			/* .slide-fade-leave-active for below version 2.1.8 */ {
	transform: scale(1,0.4);
	-webkit-transform: scale(1,0.4);
	top: 0;
	opacity: 0;
}

.smg-box-b {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
	z-index: 200;
}

.smg-box {
	position: fixed;
	width: 90%;
	top: 50%;
	left: 50%;
	background-color: #fff;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	padding: 15px 24px;
	box-sizing: border-box;
	z-index: 300;
}

.smg-title {
	font-size: 1.3em;
	padding-bottom: 6px;
}

.smg-content {
	line-height: 1.4em;
	color: #403c3c;
}

.smg-content p {
	margin: 8px 0;
}

span.smg-btn {
	color: #f97575;
	padding-right: 2em;
}

.title {
	line-height: 30px;
}

.title>.right {
	padding-right: 10px;
	padding-left: 20px;
}
.ew-comment{
    padding-bottom: 73px;
}